<template>
  <view class="record-page-container">
    <view class="dynamic-height-spacer" :style="{'--dynamic-height': `${barHeight}px`}"></view>
    <view class="home-title-container">
      <view>
        <view class="home-main-title">记录</view>
      </view>
    </view>
    <view class="chart-container chart-panel">
      <view class="chart-card">
        <view class="main-title flex-space-between-center-center">
          <view>生理周期变化</view>
        </view>
        <view class="item-panel">
          <view class="item-panel-title flex-start-center item-panel-title-with-margin">
            <text class="pj-title">近6个周期平均天数</text>
            <text class="pj-title large-bold-text">
              {{ periodicChangesDetail.averageCycleDays }}
            </text>
            <text class="pj-title bold-text">{{
                "±" + periodicChangesDetail.cycleDeviation + "天"
              }}
            </text>
            <view class="tag-container">
              <u-tag v-if="periodicChangesDetail.cycleDeviation >= 17" text="不规律" type="warning"
                     size="mini"/>
              <u-tag v-else text="规律" type="success" size="mini"/>
            </view>
          </view>
          <view class="info-box">
            近半年的时间内月经周期的变化，周期时间变化超过7天，为不规律月经
          </view>
        </view>
        <menstrual-cycle-chart ref="menstrualCycleChart"/>
      </view>
    </view>
    <view class="chart-container chart-panel">
      <view class="chart-card chart-card-negative-padding">
        <view class="main-title flex-space-between-center-center">
          <view>经期天数变化</view>
        </view>
        <view class="item-panel">
          <view class="item-panel-title flex-start-center item-panel-title-with-margin">
            <text class="pj-title">近6个周期经期天数</text>
            <text class="pj-title large-bold-text">
              {{ periodicChangesDetail.averageMenstrualDays }}
            </text>
            <text class="pj-title bold-text">{{
                "±" + periodicChangesDetail.menstrualDeviation + "天"
              }}
            </text>
          </view>
        </view>
        <view class="info-box">
          经期长度正常为3-7天，超过这个范围则为经期异常情况
        </view>
        <menstrual-changes-chart ref="menstrualChangesChart"/>
      </view>
    </view>
  </view>
</template>

<script>
import menstrualCycleChart from "@/pages/record/menstrualCycleChart.vue";
import menstrualChangesChart from "@/pages/record/menstrualChangesChart.vue";
import request from "@/api/request";

export default {
  components: {
    menstrualCycleChart,
    menstrualChangesChart
  },
  data() {
    return {
      barHeight: 0,
      statusBarHeight: 0,
      periodicChangesDetail: {
        startMonth: "1",
        startDay: "1",
        endMonth: "12",
        endDay: "31",
        averageCycleDays: 0,
        cycleDeviation: 0,
        menstrualDeviation: 0,
        averageMenstrualDays: 0
      },
      // 情况说明
      factSheet: {
        flowDay: 1,
        flowText: "无记录",
        lowBackPainDay: 1,
        lowBackPainText: "无记录"
      }
    }
  },
  methods: {
    onPeriodLengthTap() {

    }
  },
  onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 胶囊数据
    const {
      top,
      height
    } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为36
    this.barHeight = height ? height + (top - this.statusBarHeight) : 36;
    // 拉取经期
    request({
      url: `/menstrual/getMenstrualChangesChart?openid=${uni.getStorageSync("miuUserInfo").openid}`,
      method: 'POST',
      custom: {
        showError: false,
        showLoading: true,
      },
    }).then((res) => {
      const resData = res.data || {}
      this.periodicChangesDetail.startMonth = resData.startMonth || 0
      this.periodicChangesDetail.startDay = resData.startDay || 0
      this.periodicChangesDetail.endMonth = resData.endMonth || 0
      this.periodicChangesDetail.endDay = resData.endDay || 0
      this.periodicChangesDetail.averageCycleDays = resData.averageCycleDays || 0
      this.periodicChangesDetail.cycleDeviation = Math.abs(resData.cycleDeviation) || 0
      this.periodicChangesDetail.menstrualDeviation = Math.abs(resData.menstrualDeviation) || 0
      this.periodicChangesDetail.averageMenstrualDays = resData.averageMenstrualDays || 0
      this.$refs.menstrualCycleChart.setData(resData.cycleList || [])
      this.$refs.menstrualChangesChart.setData(resData.menstrualList || [])
    })
  },
}
</script>

<style lang="scss">
@import "@/pages/record/index.less";
</style>
